/*股票表现 StockPerformance2.js*/

import React from 'react'
import { connect } from 'dva'
import { Row,Col } from 'antd'
import moment from 'moment'

/**
 * StockPerformanceCharts 股票表现k线图
 */
import {IECharts} from '../../../components'
import style from './stockPerformance.less'
const StockPerformanceCharts2 = ({ 
    data 
}) => {
console.log('StockPerformanceCharts>>data',data)
	const markPointData=[];
	const Kdata =[]
	const colors=['#00da3c','#ec0000'];

	if(!_.isEmpty(data)&&!_.isEmpty(data.list)){
		data.list.map(i=>{
			Kdata.push(i)
		})
		const result = [];
    const obj = {};
    for(let i =0; i<Kdata.length; i++){
       if(!obj[Kdata[i].time]){
          result.push(Kdata[i]);
          obj[Kdata[i].time] = true;
      }
    } 
		const dates=result.map((item,i)=>{
		const hh=parseInt(moment(item.time,'YYYYMMDDHHmmss').format('HH'))
			return moment(item.time,'YYYYMMDDHHmmss').format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
		})
		data.list.map((item,i)=>{
			if(item.type === 'Buy'){
				markPointData.push({
					name: 'Buy',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(180, 0, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '买',
						},
					},
				})
			}else if(item.type === 'Sell'){
				markPointData.push({
					name: 'Sell',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(0, 180, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '卖',
						},
					},
				})
			}else if(item.type === 'Both'){
				markPointData.push({
					name: 'Buy',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(180, 0, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '买',
						},
					},
				},{
					name: 'Sell',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(0, 180, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '卖',
						},
					},
				})
			}
		})
		console.log('StockPerformanceCharts>markPointData',markPointData)
		
		const myProps={
			option : {
					color:colors,
					backgroundColor: '#fff',
					animation: false,
					tooltip: {
							trigger: 'axis',
							axisPointer: {
									type: 'cross'
							},
							backgroundColor: 'rgba(245, 245, 245, 0.8)',
							borderWidth: 1,
							borderColor: '#ccc',
							padding: 10,
							textStyle: {
									color: '#000'
							}
					},
					grid: [
							{
									left: '15%',
									right: '5%',
									top:'10%',
									height: '50%'
							},
							{
									left: '15%',
									right: '5%',
									top: '70%',
									height: '12%'
							}
					],
					xAxis: [{
						type: 'category',
						data: dates,
						boundaryGap: false,
						axisLine: { lineStyle: { color: '#777' } },
						axisLabel: {
							formatter: value => {
								let text = ''
								let values = value.split(' ');
								text = values.length === 2 ? `${values[0]}\n${values[1]}` : value;
								return text;
							},
							lineHeight: 10,
							fontSize: 10,
						},
						min: 'dataMin',
						max: 'dataMax',
						axisPointer: {
							show: true,
						},
					}, {
						type: 'category',
						gridIndex: 1,
						data: data.list.map((item,i)=>[item.time]),
						scale: true,
						boundaryGap: false,
						splitLine: { show: false },
						axisLabel: { show: false },
						axisTick: { show: false },
						axisLine: { lineStyle: { color: '#777' } },
						splitNumber: 20,
						min: 'dataMin',
						max: 'dataMax',
					}],
					axisPointer: {
						link: { xAxisIndex: 'all' },
						label: {
							backgroundColor: '#777',
						},
					},
					yAxis: [
							{
									scale: true
							},
							{
									scale: true,
									gridIndex: 1,
									splitNumber: 2,
									axisLabel: {show: false},
									axisLine: {show: false},
									axisTick: {show: false},
									splitLine: {show: false}
							}
					],
					dataZoom: [
							{
									type: 'inside',
									xAxisIndex: [0, 1],
									start: 0,
									end: 100
							},
							{
									show: true,
									xAxisIndex: [0, 1],
									type: 'slider',
									top: '85%',
									start: 0,
									end: 100
							}
					],
					series: [
							{
									name: 'K线图',
									type: 'candlestick',
									data: result.map((item,i)=>[item.open,item.close,item.lowest,item.highest]),
									itemStyle: {
											normal: {
													color: 'rgba(180, 0, 0, 1)',
													color0: 'rgba(0, 180, 0, 1)',
													borderColor: null,
													borderColor0: null
											}
									},
									markPoint: {
										data: markPointData
									},

							},
							{
									name: 'Volume',
									type: 'bar',
									xAxisIndex: 1,
									yAxisIndex: 1,
									data: result.map((item,i)=>item.close - item.open>0?[i,item.quantity,1]:[i,item.quantity,-1]),
									itemStyle: {
										normal: {
											color: (p)=>p.value[2]>0?'rgb(180, 0, 0)':'rgb(0, 180, 0)'

										}
									}
							},
							{
								name:'买卖点',
								type: 'bar',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: result.map((item,i)=>item.type!==null?[item.type,item.price]:'没有买卖点'),
							}
					]
			}
		}
		console.log('StockPerformanceCharts>myProps',myProps)
		return (
	    <div className={`chart`} style={{ height: 300 }} >
	      <IECharts {...myProps} resizable={true} />
	    </div>
	  )
	}else{
		return (
			<div>
				暂无数据
			</div>
		)
	}
	
}






/**
 * [StockPerformance 股票表现]
 * 引用组件 
 * StockPerformanceCharts 股票表现K线图
 */

class StockPerformance2 extends React.Component {
  state={
    data:this.props.data
  }

  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
  	console.log('componentWillReceiveProps',this.props,nextProps)
    if((nextProps.begindate!==this.props.begindate)||
    	(nextProps.enddate!==this.props.enddate)||
    	(nextProps.trader!==this.props.trader)||
    	(nextProps.stock !== this.props.stock)){
      this.fetchData(nextProps)
    }
    if(nextProps.data!==this.props.data){
      this.setState({
        data:nextProps.data
      })
    }
  }
  fetchData=(props)=>{
  	console.log('ssssssssss',props)
    this.props.dispatch({
      type: `dailyReplay/getStockPerformance2`,
      payload:props
    })
  }
  render() {
    const { data } = this.state
    console.log('StockPerformance>data',data)
    if(!_.isEmpty(data)){
    	return (
	      <Row>
	        <Col>
	        	<StockPerformanceCharts2 data={data} />
	        </Col>
	      </Row>
	    )
    }else{
    	return (
	      <div>暂无数据</div>
	    )
    }
    
  }
}

StockPerformance2.defaultProps={
  begindate: null,
  enddate: null,
  trader: null,
  data:{}
}

export default connect()(StockPerformance2)
